<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list-marker</title>
</head>
<style>
    li {
        list-style-type: lower-latin;
        /**
        disc        实心圆
        circle      空心圆
        square      方块
        decimal     数字
        lower-latin 小写字母
        */
    }

    li::marker {
        /* content: '√'; */
        /* content: '['counter(list-item)']'; */
        content: url('./img/share.png');
        color: red;
    }

    li:nth-child(2)::marker {
        content: url('./img/edit.png');
    }

    li:nth-child(3)::marker {
        content: url('./img/copy.png');
    }

    li:nth-child(4):hover::marker {
        content: url('./img/home.png');
    }

    li:nth-child(5):hover::marker {
        content: url('./img/setting.png');
    }

    /**==================================================== css 分割 ================================================================**/

    .box {
        width: 300px;
        height: 300px;
        /* background-image: radial-gradient(circle ,
                red 10%, green 30%, orange 20%, cyan 40%); */
        /* background-image: radial-gradient(circle at left 100px,
                red, green, orange, cyan); */
        background-image: repeating-radial-gradient(circle,
                red,
                green 10%);

        animation: rotate 3s linear infinite;
    }


    .img-path {
        width: 400px;
        height: 400px;
        background: url('./img/head.jpg') center no-repeat;
        background-size: 100%;

        /** 按圆截取 */
        /* clip-path: circle(50%); */

        /** 按三角形截取  左上角为 0 0   列出对应三角形的三个顶点 */
        /* clip-path: polygon(50% 0,
                100% 100%,
                0 100%); */

        /** 按上右下左按百分比截取 */
        /* clip-path: inset(10% 10% 20% 10%); */

        /** 按五角星截取  十个顶点*/
        clip-path: polygon(50% 0%,
                61% 35%,
                98% 35%,
                68% 57%,
                79% 91%,
                50% 70%,
                21% 91%,
                32% 57%,
                2% 35%,
                39% 35%);

        /** 按向左的箭头截取   */
        /* clip-path: polygon(0% 20%,
                60% 20%,
                60% 0,
                100% 50%,
                60% 100%,
                60% 80%,
                0 80%); */

        /** 按中间留空截取   */
        /* clip-path: polygon(0% 0%,
                0% 100%,
                25% 100%,
                25% 25%,
                75% 25%,
                75% 75%,
                25% 75%,
                25% 100%,
                100% 100%,
                100% 0%); */

        animation: rotate 3s cubic-bezier(0, 0, 0.72, -0.2) infinite;
    }

    @keyframes rotate {
        from {
            rotate: 0deg;
        }

        to {
            rotate: 360deg;
        }
    }

    /**==================================================================*/

    input[type=checkbox] {
        accent-color: red;
    }

    /* 

    input[type=radio] {
        accent-color: yellow;
    }

    input[type=range] {
        accent-color: pink;
    } */

    /* :root {
        accent-color: red;
    } */

    .custom-checkbox {
        border-color: red;
        /* 设置边框颜色为红色 */
        background-color: green;
        /* 设置填充颜色为绿色 */
    }
</style>

<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>

    <div class="box"></div>

    <div class="img-path"></div>

    <hr />

    <input type="checkbox">1</input>
    <input type="checkbox">2</input>
    <input type="checkbox">3</input>

    <hr />
    <input type="radio">1</input>
    <input type="radio">2</input>
    <input type="radio">3</input>

    <hr />

    <input type="range">range</input>

    <input type="checkbox" class="custom-checkbox">111</input>

    <hr />
</body>

</html>